<template>
	<view class="record">
		<div class="record-header">
			<ul>
				<li v-for="(item,i) in recordList" :class="index==i?'active':''" @click="changeRecord(i)">
					<text>{{item.title}}</text>
				</li>
			</ul>
		</div>
		<div class="record-banner">
			<ul>
				<li v-for="(item,i) in readList">
					<div class="banner-list">
						<div class="banner-left">
							<div class="banner-img">
								<image :src="item.book_img" mode=""></image>
							</div>
							<div class="banner-con">
								<text>{{item.book_title}}</text>
								<p>{{item.book_author}} {{item.book_category}}</p>
								<p>浏览時間：{{item.read_create_time | formatData}}</p>
							</div>
						</div>
						<div class="banner-right">
							<div class="open" @click="addJumpDetail(item)"><text>打开</text></div>
							<div class="delete" @click="detailRecord(i,item)">
								<image src="../../static/删除.png" mode=""></image>
							</div>
						</div>
					</div>
				</li>
			</ul>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				recordList: [{
					title: '浏览历史'
				}, {
					title: '书架历史'
				}],
				index: 0,
				readList: [],
				book_id: '',
				category: '',
				description: '',
				obj: {}
			}
		},
		onLoad() {
			uni.showLoading({
				title:'加载中'
			})
			//调用云函数，查询阅读
			uniCloud.callFunction({
					name: 'list_read',
					data: {}
				})
				.then(content => {
					console.log('1.0', content);
					let {
						result: {
							data
						}
					} = content;
					this.readList = data
					uni.hideLoading()
				})
		},
		methods: {
			changeRecord(i) {
				this.index = i;
				if (i == 0) {
					uni.showLoading({
						title:'加载中'
					})
					//调用云函数，查询阅读
					uniCloud.callFunction({
							name: 'list_read',
							data: {}
						})
						.then(content => {
							console.log('1.0', content);
							let {
								result: {
									data
								}
							} = content;
							this.readList = data
							uni.hideLoading()
						})
				} else {
					uni.showLoading({
						title:'加载中'
					})
					//调用云函数，查询阅读
					uniCloud.callFunction({
							name: 'list_bookself',
							data: {}
						})
						.then(content => {
							console.log('1.0', content);
							let {
								result: {
									data
								}
							} = content;
							for (let k = 0; k < data.length; k++) {
								this.obj.read_create_time = data[k].book_create_time
								// console.log(this.obj);

								data[k].read_create_time = this.obj.read_create_time
							}

							this.readList = data
							uni.hideLoading()
						})
				}
			},
			addJumpDetail(item) {
				this.book_id = item.book_sourceUuid
				this.category = item.book_category;
				this.description = item.book_description
				let data = {
					'id': this.book_id,
					'category': this.category,
					'description': this.description
				}
				uni.navigateTo({
					url: '../detail/detail?data=' + encodeURIComponent(JSON.stringify((data)))
				})
			},
			detailRecord(k,item){
				if(this.index==0){
						if(this.readList[k].read_id){				
							let that = this;
							uni.showModal({
								title: '您确定删除该记录吗?',
								success(res) {
									if(res.confirm){
										uniCloud.callFunction({
											name:'delete_read',
											data:{read_id: that.readList[k].read_id}
										}).then(content=>{
											console.log('1.0',content);
											uni.showToast({
												title:'删除记录成功',
												icon:'success'
											})
											let arr = that.readList.filter(item=>{
												if(item.read_id != that.readList[k].read_id){
													return item;
												}
											})
											that.readList = arr
										})
									}else if(res.cancel){
										uni.showToast({
											title:'取消删除记录',
											icon:'none'
										})
									}
								}
							})
						}
					
				}else{
					if(this.readList[k].book_id){
						let that = this;
						uni.showModal({
							title: '您确定删除该记录吗?',
							success(res) {
								if(res.confirm){
									uniCloud.callFunction({
										name:'delete_bookself',
										data:{book_id: that.readList[k].book_id}
									}).then(content=>{
										console.log('1.0',content);
										uni.showToast({
											title:'删除记录成功',
											icon:'success'
										})
										let arr = that.readList.filter(item=>{
											if(item.book_id != that.readList[k].book_id){
												return item;
											}
										})
										that.readList = arr
									})
								}else if(res.cancel){
									uni.showToast({
										title:'取消删除记录',
										icon:'none'
									})
								}
							}
						})
					}
				}
			}
		},
		filters: {
			formatData(data) {
				var date = new Date(data); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
				var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
				var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
				var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
				return Y + M + D;
			},
			readFunc(value) {
				let time = Math.floor(value / 60)
				return time
			}
		}
	}
</script>

<style lang="scss">
	.record {
		height: 2000rpx;
		opacity: 1;
		overflow: hidden;
		background-image: url("../../static/background-image.png");
		left: -10px;
		top: 0px;
		width: 100%;
		opacity: 1;

		.record-header {
			width: 90%;
			margin: 40rpx auto 0;
			height: 160rpx;
			opacity: 0.75;
			border-top-left-radius: 20px;
			border-top-right-radius: 20px;
			background: #BE9161;
			box-shadow: 0px 0px 0px 0px #4A1119;

			ul {
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: space-evenly;
				align-items: center;
				list-style: none;
				padding: 0;

				li {
					width: 200rpx;
					height: 60rpx;
					text-align: center;
					line-height: 60rpx;
					background-color: #f5e9d5;
					color: #737373;
					border-radius: 25px;
					font-size: 15px;

					&.active {
						background-color: #fd6537;
						color: #fff;
						transition: all .3s;
					}
				}
			}
		}

		.record-banner {
			width: 100%;
			height: 1500rpx;
			background-color: #fceccc;

			ul {
				width: 90%;
				height: 100%;
				list-style: none;
				padding: 0;
				margin: 0 auto;

				li {
					padding: 20rpx 0;
					margin-bottom: 40rpx;
					box-sizing: border-box;

					.banner-list {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.banner-left {
							display: flex;
							// align-items: center;
							width: 500rpx;
							height: 160rpx;

							.banner-img {
								width: 144rpx;
								height: 190rpx;

								image {
									width: 100%;
									height: 100%;
									border-radius: 8px;
									border: 1px solid #fe8761;
								}
							}

							.banner-con {
								margin-left: 30rpx;
								width: 300rpx;
								height: 100%;
								padding: 20rpx 0;
								box-sizing: border-box;

								text {
									font-size: 17px;
									color: #3B3B3B;
									font-weight: 600;

								}

								p {
									font-size: 11px;
									color: #A8A8A8;

									&:nth-child(2) {
										margin: 18rpx 0;
										font-size: 12.5px;
										color: #77828A;
									}
								}
							}
						}

						.banner-right {
							display: flex;
							align-items: center;

							.open {
								width: 60px;
								height: 28px;
								color: #fff;
								font-size: 12px;
								opacity: 1;
								border-radius: 15px;
								background: linear-gradient(90deg, #F78817 0%, #E86F2D 100%);
								text-align: center;
								line-height: 30px;
								margin-right: 40rpx;
							}

							.delete {
								width: 40rpx;
								height: 40rpx;

								image {
									width: 100%;
									height: 100%;
								}
							}
						}
					}
				}
			}
		}
	}
</style>